<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 manual</title>
    <link rel="stylesheet" href="styles/iframe.css">
    <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="scripts/iframe.js" type="text/javascript"></script>
</head>
<body>
	<header>
    	<div id="header_logo">
        	<div id="logo">前端参考手册</div>
            <div id="sign">--cokepluscarbon</div>
        </div>
    	<nav id="header_nav">
        	<ul>
        		<li style="border-left:1px solid #2FA7FF;"><a href="">HTML5</a></li>
        		<li><a href="">CSS3</a></li>
        		<li><a href="">Javascript</a></li>
        	</ul>
        </nav>
    </header>
 
 	 <aside>
     	<ul class="folder" style="margin-left:10px;">
     		<li><span>简介</span>
            	<ul class="file">
            		<li><a href="">关于本手册</a></li>
            		<li><a href="">关于样式表</a></li>
            		<li><a href="">关于作者</a></li>
            		<li><a href="">阅读及使用指引</a></li>
            		<li><a href="">鸣谢</a></li>
                    <li><a href="">捐赠</a></li>
            	</ul>
            </li>
     		<li><span>属性</span>
            	<ul class="folder">
            		<li><span>定位(position)</span>
                    	<ul class="file">
                    	  <li><a href="properties/position/position.html" target="iframe">position</a></li>
                    	  <li><a href="properties/position/z-index.html" target="iframe">z-index</a></li>
                    	  <li><a href="properties/position/top right bottom left.html" target="iframe">top right bottom left</a></li>
                    	</ul>
                    </li>
            		<li><span>布局(layout)</span>
                    	<ul class="file">
            				<li><a href="properties/layout/display.html" target="iframe">display</a></li>
            				<li><a href="properties/layout/float.html" target="iframe">float</a></li>
            				<li><a href="properties/layout/clear.html" target="iframe">clear</a></li>
            				<li><a href="properties/layout/visibility.html" target="iframe">visiability</a></li>
            				<li><a href="properties/layout/clip.html" target="iframe">clip</a></li>
                    		<li><a href="properties/layout/overflow.html" target="iframe">overflow</a></li>
                            <li><a href="properties/layout/overflow-x.html" target="iframe">overflow-x</a></li>
                    		<li><a href="properties/layout/overflow-y.html" target="iframe">overflow-y</a></li>
            			</ul>
                    </li>
            		<li><span>弹性盒模型(flexible box)</span></li>
            		<li><span>尺寸(dimension)</span></li>
            		<li><span>外补白(margin)</span></li>
            		<li><span>内补白(padding)</span></li>
            		<li><span>边框(border)</span></li>
            		<li><span>背景(background)</span></li>
                    <li><span>颜色(color)</span></li>
                    <li><span>字体(font)</span></li>
                    <li><span>文本(text)</span></li>
                    <li><span>列表(list)</span></li>
                    <li><span>表格(table)</span></li>
                    <li><span>内容(content)</span></li>
                    <li><span>用户界面(user interface)</span></li>
                    <li><span>多栏(mutil column)</span></li>
                    <li><span>2D变换(2D transform)</span></li>
                    <li><span>过度(transition)</span></li>
                    <li><span>动画(animation)</span></li>
                    <li><span>打印(print)</span></li>
                    <li><span>媒体查询(media queries)</span></li>
                    <li><span>Only IE</span></li>
                    <li><span>Only FireFox</span></li>
            	</ul>
            </li>
     		<li><span>选择符</span>
            	<ul class="folder">
            		<li><a href="">元素选择器</a></li>
            		<li><a href="">关系选择器</a></li>
            		<li><a href="">属性选择器</a></li>
            		<li><a href="">伪类选择器</a></li>
            		<li><a href="">伪对象选择器</a></li>
            	</ul>
            </li>
     		<li><span>语法与规则</span>
            	<ul class="file">
            		<li><a href="">!important</a></li>
            		<li><a href="">/*comment*/</a></li>
            		<li><a href="">@import</a></li>
            		<li><a href="">@charset</a></li>
            		<li><a href="">@media</a></li>
                    <li><a href="">@font-face</a></li>
            		<li><a href="">@page</a></li>
            		<li><a href="">@keyframes</a></li>
            	</ul>
            </li>
     		<li><span>取值</span>
            	<ul class="folder">
            		<li><a href="">颜色</a></li>
            		<li><a href="">文本</a></li>
            		<li><a href="">函数</a></li>
            		<li><a href="">图象</a></li>
            		<li><a href="">数字</a></li>
                    <li><a href="">其他</a></li>
            	</ul>
            </li>
     		<li><span>单位</span>
            	<ul class="folder">
            		<li><a href="">长度</a></li>
            		<li><a href="">角度</a></li>
            		<li><a href="">时间</a></li>
                    <li><a href="">频率</a></li>
            		<li><a href="">布局</a></li>
            	</ul>
            </li>
     		<li><span>附录</span>
            	<ul class="file">
            		<li><a href="">颜色关键字</a></li>
            		<li><a href="">每天类型</a></li>
            	</ul>
            </li>
     		<li><span>CSS Hack</span>
            	<ul class="file">
            		<li><a href="">条件Hack</a></li>
            		<li><a href="">属性级Hack</a></li>
            		<li><a href="">选择符级Hack</a></li>
            	</ul>
            </li>
            <li><span>问题与经验</span>
            	<ul class="file">
            		<li><a href="">问题与经验1</a></li>
            		<li><a href="">问题与经验2</a></l
            	></ul>
            </li>
     	</ul>
     </aside>
     <iframe id="iframe" name="iframe" src="" frameborder="0"></iframe>
    
    <footer>www.cokepluscarbon.com</footer>
</body>
</html>